<template>
        <div class="header">
            <div class="getAPosition" v-if="weizi">
            {{weizi}}
        </div>
        <div class='getAPosition1' v-else>
            <el-button @click="getdiwe">点击获取当前地理位置</el-button>
        </div>
            <img src="../../assets/image/logo.png" alt="">
            <div class="header-right">
                <!-- <input type="text" class="input1" v-model="message" @keydown="getsearch1"> -->
                <!-- <button class="input2" @click="getsearch">
                    <span class="iconfont icon-fangdajing"></span>搜索
                </button> -->

                <el-dropdown trigger="click">
                    <span class="el-dropdown-link">
                        管理<i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item class="clearfix" >
                        <span @click="goMyChats">聊天中心</span>
                        <el-badge class="mark"  />
                        </el-dropdown-item>
                        <el-dropdown-item class="clearfix" >
                        <span @click="goindex">主&emsp;页</span>
                        <el-badge class="mark" :value="12" />
                        </el-dropdown-item>
                        <el-dropdown-item class="clearfix" >
                        <span @click="out">退&emsp;出</span>
                        <el-badge class="mark" :value="3" />
                        </el-dropdown-item>
                    </el-dropdown-menu>
                    </el-dropdown>
            </div>
        </div>
</template>

<script>
export default {
    data(){
        return{
            weizi:''
        }
    },
    created(){
        // this.getdiwe()
    },
   methods:{
       //前往聊天中心
        goMyChats(){
            this.$router.push("/chat/chatlist")
        },
        //前往主页
        goindex(){
            this.$router.push("/admin")
        },

        //退出登录
        out(){
            sessionStorage.clear()
            this.$router.push("/login")
        },
        getdiwe(){
            var geolocation = new BMap.Geolocation(); 
            var that1=this
      
            var gc = new BMap.Geocoder();     
            geolocation.getCurrentPosition(function(r){   //定位结果对象会传递给r变量  
       
            
            if(this.getStatus() == BMAP_STATUS_SUCCESS){  //通过Geolocation类的getStatus()可以判断是否成功定位。 
                var pt = r.point;   
              
                gc.getLocation(pt, function(rs){   
                    var addComp = rs.addressComponents;  
                    // alert(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);    
                    that1.weizi=addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
                    
                }); 
 
            }else{  
 
                //关于状态码    
                //BMAP_STATUS_SUCCESS   检索成功。对应数值“0”。 
 
                //BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
 
                //BMAP_STATUS_UNKNOWN_LOCATION  位置结果未知。对应数值“2”。   
 
                //BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。    
 
                //BMAP_STATUS_INVALID_KEY   非法密钥。对应数值“4”。    
 
                //BMAP_STATUS_INVALID_REQUEST   非法请求。对应数值“5”。    
 
                //BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)   
 
                //BMAP_STATUS_SERVICE_UNAVAILABLE   服务不可用。对应数值“7”。(自 1.1 新增)  
 
                //BMAP_STATUS_TIMEOUT   超时。对应数值“8”。(自 1.1 新增)    
 
                switch( this.getStatus() ){  
                    case 2:  
                        alert( '位置结果未知 获取位置失败.' );  
                    break;  
                    case 3:  
                        alert( '导航结果未知 获取位置失败..' );  
                    break;  
                    case 4:  
                        alert( '非法密钥 获取位置失败.' );  
                    break;  
                    case 5:  
                        alert( '对不起,非法请求位置  获取位置失败.' );  
                    break;  
                    case 6:  
                        alert( '对不起,当前 没有权限 获取位置失败.' );  
                    break;  
                    case 7:  
                        alert( '对不起,服务不可用 获取位置失败.' );  
                    break;  
                    case 8:  
                        alert( '对不起,请求超时 获取位置失败.' );  
                    break;  
 
                }  
 
            }          
 
        },{enableHighAccuracy: true})  
        }
   } 
}
</script>

<style lang="less" scoped>
         .header{
        padding-left: 200px;
        padding-right: 200px;
        height:100px;
        width:100%;
        background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
        position: relative;
        .getAPosition{
            position: absolute;
            top: 30px;
            right: 20px;
        }
        .getAPosition1{
            position: absolute;
            top: 30px;
            right: 20px;
        }
        img{
            height: 100px;
        }
        .header-right{
            display: inline-block;
            width:350px;
            height: 40px;
            display: flex;
            justify-content: space-around;
            position: absolute;
            top:30px ;
            right: 200px;
            .el-dropdown{
                cursor: pointer;
                // width: 100%;
                //             height: 100%;
                text-align: center;
                .el-dropdown-menu{
                    width: 100%;
                    height: 100%;
                    
                    .el-dropdown-item{
                        width: 100%;
                        height: 100%;
                        
                        span{
                            display:inline-block;
                            width: 100%;
                            height: 100%;
                        }
                    }

                }
            }
            .input1{
                display: inline-block;
                width:150px;
                height: 30px;
                border-radius: 5px;
            }
            .input2{
                display: inline-block;
                width: 60px;
                height: 30px;
                border-radius: 5px;
                background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
                color: #ecf0f1;
                margin-left: 5px;
            }
        }
    }
</style>>
